<!-- The design-system top-level class is the scss/pages/_design-system.scss page -->
{% macro designSystemComponent(previewUrl, markup, rendered, handle, size) %}
<div class="flow">
  <iframe class="design-system__preview-frame" src="{{ previewUrl }}?state=window" data-size="{{ size if size else 'standard' }}"></iframe>
  <div class="cluster flex-justify-end">
    <a href="{{ previewUrl }}">View full screen</a>
  </div>
  {% if markup or rendered %}
  <div class="gap-top-size-2">
    <details>
      <summary>Code</summary>
      <div class="flow">
        {% if markup %}      
          <p class="text-size-3">Source (Nunjucks)</p>
          <web-copy-code>
            {% highlight "html" %}{{ markup | safe }}{% endhighlight %}
          </web-copy-code>
        {% endif %}

        {% if rendered %}
          <p class="text-size-3">Output</p>
          <web-copy-code>
            {% highlight "html" %}{{ rendered | safe }}{% endhighlight %}
          </web-copy-code>
        {% endif %}
      </div>
    </details>
  </div>
  {% endif %}
</div>
{% endmacro %}
